<template>
  <div class="add-tags">
   <el-dialog :title="`${currTags.id?'修改':'新增'}目录`" :visible.sync="show" width="400px">

     <el-form :model="formModel" :rules="rules" ref="formModel" label-width="80px" style="margin-bottom:50px">
      <el-form-item label="所属学科" size="small" prop="subjectID">
        <el-select  v-model="formModel.subjectID" placeholder="请选择" style="width:280px">
          <el-option
            v-for="(item,index) in subjectOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="tagName" size="small">
        <el-input v-model="formModel.tagName" placeholder="请输入目录名称"></el-input>
      </el-form-item>
     </el-form>
     
     <div style="text-align: center">
      <el-button @click="cancle('formModel')">取消</el-button>
      <el-button type="primary" @click="submitForm('formModel')">确定</el-button>
     </div>
     
   </el-dialog>  
  </div>
</template>

<script>
import {add, update} from '@/api/hmmm/tags'
import { simple as subjectList } from '@/api/hmmm/subjects'
export default {
  name: 'TagsAdd',
  props: {
    currTags: {
     default: () => {},
     type: Object
    }
  },
  created() {
    this.getsubjectArr()
  },
  data() {
    return {
     show: false,
     subjectOptions:[],
     formModel: {
       id: null,
       subjectID:'',
       tagName: null,
     },
     rules: {
       subjectID: [
        { type: 'number', message: '请选择所属学科', tirgger: 'blur' }
       ],  
       tagName: [
        { required: true, message: '请输入标签名称', tirgger: 'blur' }
       ]
     },
     
     
    }
  },
  methods: {
   open () {
     this.show = true
     console.log(this.currTags);
     if (this.currTags.id) {
       const { id, subjectID, tagName } = this.currTags
       this.formModel = { id, subjectID, tagName }
     } else {
       this.formModel = {
         id: null,
         subjectID: null,
         tagName: null
       }
     }
   },
   submitForm(formModel) {
     this.$refs[formModel].validate(async valid => {
       if (valid) {
         console.log(valid);
         if(!this.currTags.id) {
           await add(this.formModel)

         } else {
           this.formModel.id = this.currTags.id
           await update(this.formModel)
         }
         this.show = false
         this.$message.success('修改成功');
         this.$refs[formModel].resetFields();
         this.$emit('updateList')
       } else {
         this.$message.error('修改失败，请稍后重试!!!');
         return false;
       }
     });
   },
   cancle(formModel) {
     this.show = false
     this.$message.success('取消成功');
     this.$refs[formModel].resetFields();
   },
   async getsubjectArr() {
     const {data} = await subjectList()
     console.log(data);
     this.subjectOptions = data
   }
  }
}
</script>

<style lang='less' scoped>
</style>

